<template>
	<view>
		<view class="card">
			<navSearchBar title="个人中心" background=""></navSearchBar>
			<view class="info">
				<view class="my-company">{{user.organization.title}}</view>
				<view class="flex-row-center">
					<image class="my-photo" :src="user.avatar" mode="aspectFill"></image>
					<view>
						<view class="my-name">{{user.nickname}}</view>
						<view class="flex-row-center">
							<view class="my-job flex-row-center">
								<text>职位:</text>
								<text>{{user.deatail.position || '' }} </text>
							</view>
							<view class="my-phone flex-row-center">
								<image src="/static/personal/phone.png" mode=""></image>
								<text>{{user.username}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="map-box" @click="locationTo">
			<view class="map">
				<my-map :compLatitude="compLatitude" :compLongitude="compLongitude"></my-map>
			</view>
			<view class="address">{{user.organization.archive.address || ""}}</view>
		</view>
		<hotProductAndDemo :list="list" name="热门产品" @getMore="getMore(1)"
			@routerToDetail="(item)=>routerToDetail(item,1)"></hotProductAndDemo>
	</view>
</template>

<script>
	import myMap from "../../components/my-componets/my-map.vue"
	import hotProductAndDemo from '../../components/hotProductAndDemo.vue'
	export default {
		components: {
			myMap,
			hotProductAndDemo
		},
		data() {
			return {
				user:{},
				list: [],
				compLatitude:'',
				compLongitude:'',
			};
		},
		onLoad() {
			this.getCard()
			this.getProduct()
		},
		methods: {
			async getCard() {
				let res = await this.$api.userCard()
				this.user = res.data.data;
				this.compLatitude = parseFloat(this.user.organization.archive.latitude);
				this.compLongitude = parseFloat(this.user.organization.archive.longitude);
				console.log(res.data.data,"user",this.compLatitude)
			},
			async getProduct() {
				let res = await this.$api.hotProduct({limit: 9})
				this.list = res.data.data 
			},
			getMore() {
				this.$Router.push({name:"product"})
			},
			routerToDetail(item) {
				this.$Router.push({name:"productDetail",query:{id:item.id}})
			},
			locationTo(){
				uni.openLocation({
				  longitude: parseFloat(this.compLongitude),
				  latitude: parseFloat(this.compLatitude),          
				  name: this.user.organization.title,
				  address: this.user.organization.archive.address,
					success: function (res) {
					console.log('打开系统位置地图成功')
				},
				fail: function (error) {
				  console.log(error)
				},
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		// height: 516rpx;
		background: linear-gradient(180deg, #E9ECFF 0%, #FFFFFF 100%);
		border-top: none;
		margin-bottom: 30rpx;
	}

	.info {
		margin: 40rpx 40rpx 50rpx;

		.my-company {
			line-height: 32rpx;
			font-size: 32rpx;
			font-weight: $Semibold;
			margin-bottom: 34rpx;
		}

		.my-photo {
			display: block;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 6rpx solid #FFFFFF;
			box-shadow: 0 0 8rpx 0 #000000;
			margin-right: 30rpx;

		}

		.my-name {
			font-weight: Semibold;
			font-size: 32rpx;
			margin-bottom: 24rpx;
		}

		.my-job {
			font-size: $text-size;
			margin-right: 40rpx;

			text:nth-of-type(1) {
				margin-right: 20rpx;
			}
		}

		.my-phone {
			image {
				width: 20rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: $text-size;
			}
		}
	}

	.map-box {
		margin: 0 30rpx 80rpx;
		height: 160rpx;
		border: 4rpx solid #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.10);
		position: relative;
		.map{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: -1;
		}
		.address {
			line-height: 28rpx;
			font-size: 28rpx;
			font-weight: $Semibold;
			margin: 66rpx auto;
			text-align: center;
		}
	}
</style>